{extend name="template/base" /}
{block name="content"}
<div class="page-container" style="padding:-1px 20px 0 0;">
    <style>
        .clearfix:after{display:block;height:0;clear:both;visibility:hidden}.clearfix{zoom:1}
        .tabBar {border-bottom: 2px solid #222}
        .tabBar span {background-color: #e8e8e8;cursor: pointer;display: inline-block;float: left;font-weight: bold;height: 30px;line-height: 30px;padding: 0 15px}
        .tabBar span.current{background-color: #222;color: #fff}
        .tabCon {display: block}
        .tabCon iframe {
            position: absolute;
            bottom: 0;
            height: 100%;
            width: 99%;
            top:100px;
            left: 0;
        }
    </style>
    <div id="tab_demo" class="HuiTab">
        <div class="tabBar clearfix">
            
            <span index="{:\\think\\Url::build('editPayment')}">支付方式</span>
            <span index="{:\\think\\Url::build('paymentDeploy')}">支付方式配置</span>
        </div>
        <div class="tabCon">
            <iframe frameborder="0" src=""></iframe>
        </div>
    </div>
</div>
{/block}
{block name='script'}
<script>
    $(function(){
        $.Huitab1("#tab_demo .tabBar span","#tab_demo .tabCon iframe","current","click")
    })

    jQuery.Huitab1 =function(tabBar,tabCon,class_name,tabEvent){

        var $tab_menu=$(tabBar);
        console.log($(tabBar).eq(0).attr('index'))
        // 初始化操作
        $tab_menu.removeClass(class_name);
        $(tabBar).eq(0).addClass(class_name);
        srcs = $(tabBar).eq(0).attr('index');
        $(tabCon).attr('src',srcs);

        $tab_menu.bind(tabEvent,function(){
            $tab_menu.removeClass(class_name);
            $(this).addClass(class_name);
            var index = $tab_menu.index(this);
            srcs = $(tabBar).eq(index).attr('index');
            $(tabCon).attr('src',srcs);
        })
    }
</script>
{/block}